extends ../_layout

block active
  - sidebar_active = 'todo.html'

block content
  .content-heading Todo List
    button.pull-right.btn.btn-danger Clear All Items
    small Keeping track of tasks

  .table-grid.todo
    .col.col-lg
      .pr-lg

        form.mb-xl
          .form-group
            input.form-control(type='text', placeholder='Task title..', required)
          .form-group
            textarea.form-control(placeholder='Type a description..', rows="8")
          
          button.btn.btn-primary.btn-block(type='submit') Add Todo
    
    .col.todo-item-list
        //- .lead.text-muted.text-center No tasks...
        #accordion.panel-group(role="tablist", aria-multiselectable="true")
          .todo-item.panel.panel-default.todo-complete
            .panel-heading
              h4.panel-title
                span.clickable(role="button", data-toggle="collapse-disabled", data-parent="#accordion", data-target="#collapseOne", aria-expanded="true", aria-controls="collapseOne")
                  span.close &times;
                  span.inline.checkbox.c-checkbox
                    label
                      input#todo-item-0(type='checkbox')
                      span.fa.fa-check
                  span.todo-title Meeting with Mark at 7am.
                  span.todo-edit.fa.fa-pencil
            #collapseOne.panel-collapse.collapse
              .panel-body
                p
                  span Pellentesque convallis mauris eu elit imperdiet quis eleifend quam aliquet. 

          .todo-item.panel.panel-default
            .panel-heading
              h4.panel-title
                span.clickable(role="button", class="collapsed", data-toggle="collapse", data-parent="#accordion", data-target="#collapseTwo", aria-expanded="false", aria-controls="collapseTwo")
                  span.close &times;
                  span.inline.checkbox.c-checkbox
                    label
                      input#todo-item-1(type='checkbox')
                      span.fa.fa-check
                  span.todo-title Call Sonya. Talk about the new project.
                  span.todo-edit.fa.fa-pencil
            #collapseTwo.panel-collapse.collapse
              .panel-body
                p
                  span.text-muted No item description
          .todo-item.panel.panel-default
            .panel-heading
              h4.panel-title
                span.clickable(role="button", class="collapsed", data-toggle="collapse", data-parent="#accordion", data-target="#collapseThree", aria-expanded="false", aria-controls="collapseThree")
                  span.close &times;
                  span.inline.checkbox.c-checkbox
                    label
                      input#todo-item-2(type='checkbox')
                      span.fa.fa-check
                  span.todo-title Find a new place for vacations
                  span.todo-edit.fa.fa-pencil
            #collapseThree.panel-collapse.collapse
              .panel-body
                p
                  span.text-muted No item description
        p.text-right
          span 1 Completed
          | - 
          span 2 Pending
        // end ngIf: items.length > 0


